<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付</title>

    <!--公用css引用-->
    <?php include 'include/style.php';?>
    <!--END/公用css引用-->
    <link rel="stylesheet" href="../css/confirm-order.css">
</head>
<body>

<!--公共头部-->
<?php include 'include/header-noNav.php';?>
<!--END/公共头部-->

<div class="inbox pay-order">
    <div class="ad-o-b">
        <div class="ad-o-inner fn-ohide">
            <i class="icon icon-order-status icon-ord-st-ok"></i>

            <span class="font-22">订单提交成功，现在只差最后一步啦！</span>

            <p class="font-14 fn-mt10">请您在提交订单后 <span class="text-color-1 js-num">1小时59分</span> 内完成支付，否则订单将会自动取消！</p>

        </div>
        <div class="ad-o-inner ui-nobrd-b">
            <a href="" class="fn-fr text-color-9 link">我的订单 &gt;</a>
            <p>飞科（FLYCO）FR5001充电式毛球修剪器 剃去毛球器      保税区直发  郑州保税仓发货</p>
            <p class="fn-mt6">收货信息：河南省 郑州市 中原区  中原西路  收件人姓名  电话：18600000000</p>

        </div>
    </div>
</div>

<div class="inbox pay-order">
    <div class="ad-o-b">
        <div class="ad-o-inner fn-ohide">
            <span class="fn-fr text-color-9">含运费：￥0.00 <span class="fn-ml10">&nbsp;</span> 关税：￥0.00</span>

            <p><span class="font-18 text-color-7">支付金额：</span><span class="font-24 text-color-1">￥228.00</span></p>
        </div>


        <div class="ad-o-inner ui-nobrd-b">
            <div class="payWays js-simRadio">
                <div class="js-check wrap alipay cur" data-text="用支付宝支付">
                    <input type="radio" name="payways" id="zhiFuBao" checked="checked">
                    <label for="zhiFuBao" class="icon pay-icon"></label>
                </div>
                <div class="js-check wrap alipay" data-text="用通联支付">
                    <input type="radio" name="payways" id="tonglian" >
                    <label for="xxBao" class="icon pay-icon2"></label>
                </div>
                <div class="js-check wrap alipay" data-text="平安银行支付">
                    <input type="radio" name="payways" id="pingan" >
                    <label for="xxBao" class="icon pay-icon4"></label>
                </div>
                <a href="pay-success.php" class="fn-btn btn-primary payBtn js-payBtn">用支付宝支付</a>
            </div>
        </div>
    </div>
</div>



<!--公共尾部-->
<?php include 'include/footer.php'; ?>
<!--END/公共尾部-->

<!--公用js引用-->
<?php include 'include/script.php'; ?>
<!--END/公用js引用-->

<!--<script src="../js/"></script>-->
<script id="tpl" type="tpl">
    <div  class="bl-nodata nodata-imgtext">
        <div class="nodata-img">
            <img src="../images/mascot.png" alt="">
        </div>

        <div class="nodata-text nodata-con">
           <div class="h1">支付成功</div>
            <a href="order-detail.php" target="_blank" class="text-color-1">立即查看订单详情 &gt;</a>
            <div class="hr"></div>
            <div class="h1">如果支付失败</div>
            <a href="#" class="text-color-1">查看您的支付宝交易记录 &gt;</a>
        </div>
    </div>
</script>
<script>
    $('.js-simRadio').on('click','.js-check',function(){
        var that=$(this),wrap=that.closest('.js-simRadio');

        if(that.hasClass('cur')) return false;

        that.addClass('cur').siblings('.cur').removeClass('cur').find('input').prop('checked',false);
        that.find('input').prop('checked',true);

        //todo 切换按钮文字
        var selTxt=$('.js-payBtn',wrap);
        if(selTxt.length){
            selTxt.text(that.data('text'));
        }

        return false;
    });

    //支付
    $('.js-payBtn').on('click',function(){
        //自定义 支付中...提示

        var payLayer=layer.open({
            type: 1,
            title: '正在支付...',
            shadeClose: false,
            area: ['480px', '350px'],
            skin: 'layer-skin-1',
            content: $('#tpl').html()
        });

        //TODO 支付请求
        //$.ajax();

        return false;
    });

</script>
</body>
</html>